<template>
  <div class="cgjhadd">
    <el-form ref="form" :model="form" :rules="rules" label-width="20%">
      <div class="contain">
        <div class="left">
          <el-collapse v-model="activeNames">
               <el-collapse-item title="申请信息" name="1" id="shenqing">
              <div class="form-box">
                <el-form-item label="企业名称" prop="enterpriseName">
                  <el-input
                    disabled
                    v-model="form.enterpriseName"
                    placeholder="请输入企业联系人电话"
                  />
                </el-form-item>
              </div>
            </el-collapse-item>
               <el-collapse-item title="租赁信息" name="2" id="zulin">
              <div class="form-box">
                <el-form-item label="开始时间" prop="beginTime">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.beginTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择开始时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.endTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="开始免租时间" prop="rentFreeBeginDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.rentFreeBeginDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择开始免租时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="免租结束时间" prop="rentFreeEndDate">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="form.leaseRecord.rentFreeEndDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择免租结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
            </el-collapse-item>
            <el-collapse-item title="房源列表" name="3" id="dianjian">
              <div class="form-box1">
                <el-button
                  type="primary"
                  @click="addDevice('buiRoomList')"
                  icon="el-icon-plus"
                  size="mini"
                  >选择</el-button
                >
                <el-table :data="buiRoomListSelect">
                  <el-table-column
                    label="房源编号"
                    align="center"
                    prop="roomNum"
                  />
                  <el-table-column label="楼层" align="center" prop="floor" />
                  <el-table-column label="园区" align="center" prop="parkNum" />
                  <el-table-column
                    label="楼栋"
                    align="center"
                    prop="buildingNum"
                  />
                  <el-table-column
                    label="房源面积(m²)"
                    align="center"
                    prop="builtUpArea"
                  />
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        @click="delDevice('buiRoomList', scope.$index)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
            <el-collapse-item title="费用选择" name="4" id="dianjian1">
              <div class="form-box1">
                <el-button
                  type="primary"
                  @click="addDevice('office')"
                  icon="el-icon-plus"
                  size="mini"
                  >选择办公费用</el-button
                >
                <el-table :data="OfficeTotalSel">
                  <el-table-column
                    label="第一年租金"
                    align="center"
                    prop="firstYearRental"
                  />
                  <el-table-column
                    label="第二年租金"
                    align="center"
                    prop="secondYearRental"
                  />
                  <el-table-column
                    label="第三年租金"
                    align="center"
                    prop="thirdYearRental"
                  />
                  <el-table-column
                    label="第四年租金"
                    align="center"
                    prop="fourthYearRental"
                  />
                  <el-table-column
                    label="第五年租金"
                    align="center"
                    prop="fifthYearRental"
                  />
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        @click="delDevice('office', scope.$index)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <el-button
                  type="primary"
                  @click="addDevice('facilities')"
                  icon="el-icon-plus"
                  size="mini"
                  >选择设施费用</el-button
                >
                <el-table :data="feFacilitySel">
                  <el-table-column
                    label="第一年配套设施使用费"
                    align="center"
                    prop="firstYearFacilityFee"
                  />
                  <el-table-column
                    label="第二年配套设施使用费"
                    align="center"
                    prop="secondYearFacilityFee"
                  />
                  <el-table-column
                    label="第三年配套设施使用费"
                    align="center"
                    prop="thirdYearFacilityFee"
                  />
                  <el-table-column
                    label="第四年配套设施使用费"
                    align="center"
                    prop="fourthYearFacilityFee"
                  />
                  <el-table-column
                    label="第五年配套设施使用费"
                    align="center"
                    prop="fifthYearFacilityFee"
                  />
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        @click="delDevice('facilities', scope.$index)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>

                
          

                <el-button
                  type="primary"
                  @click="addDevice('property')"
                  icon="el-icon-plus"
                  size="mini"
                  >选择物业费用</el-button
                >
                <el-table :data="fePropertyListSel">
                  <el-table-column
                    label="收费模式"
                    align="center"
                    prop="feeModel"
                  > <template slot-scope="scope">
          <span>{{ scope.row.feeModel=='0'?'按月':scope.row.feeModel=='1'?'按季度':''}}</span>
        </template>
            </el-table-column>
                  <el-table-column
                    label="计价标准(元/平方/月)"
                    align="center"
                    prop="feeStandard"
                  />

                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        @click="delDevice('property', scope.$index)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
            <el-collapse-item title="附件上传" name="5" id="fujian">
              <div class="form-box">
                <el-form-item label="附件">
                  <FileUpload ref="fileupload" :fileListTem="form.fileIdList" />
                </el-form-item>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="right">
          <div class="my-steps-box">
            <div
              :class="['step-item', stepSelect == index ? 'step-active' : '']"
              v-for="(item, index) in step"
              :key="index"
            >
              <div class="top-title" @click="jump(item.to, index)">
                <div class="cricle"></div>
                <span class="text">{{ item.text }}</span>
              </div>
              <div class="line"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="big-foot-fixed">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-form>
    <!-- 添加设备 -->
    <el-dialog :title="title" :visible.sync="dialogdeviceVisible">
      <div v-if="typeFee === 'buiRoomList'">
        <el-table
          key="buiRoomList"
          ref="buiRoomListRef"
          :data="buiRoomList"
          class="device-style"
          v-loading="loading"
          max-height="250"
          :row-key="getRowKey"
          @selection-change="handleDevice"
        >
          <el-table-column
            v-if="typeFee === 'buiRoomList'"
            type="selection"
            :reserve-selection="true"
            width="55"
            align="center"
          />

          <el-table-column label="房源编号" align="center" prop="roomNum" />
          <el-table-column label="楼层" align="center" prop="floor" />
          <el-table-column label="园区" align="center" prop="parkNum" />
          <el-table-column label="楼栋" align="center" prop="buildingNum" />
          <el-table-column
            label="房源面积(m²)"
            align="center"
            prop="builtUpArea"
          />
        </el-table>
        <pagination v-show="buiRoomListTotal > 0" :total="buiRoomListTotal" />
      </div>
      <div v-if="typeFee === 'office'">
        <el-table
          key="office"
          ref="feOfficeListRef"
          :data="feOfficeList"
          class="device-style"
          v-loading="loading"
          max-height="250"
          :row-key="getRowKey"
          highlight-current-row
          @current-change="handleDevice"
        >
          <el-table-column
            label="第一年租金"
            align="center"
            prop="firstYearRental"
          />
          <el-table-column
            label="第二年租金"
            align="center"
            prop="secondYearRental"
          />
          <el-table-column
            label="第三年租金"
            align="center"
            prop="thirdYearRental"
          />
          <el-table-column
            label="第四年租金"
            align="center"
            prop="fourthYearRental"
          />
          <el-table-column
            label="第五年租金"
            align="center"
            prop="fifthYearRental"
          />
        </el-table>
        <pagination v-show="OfficeTotal > 0" :total="OfficeTotal" />
      </div>
      <div v-if="typeFee === 'facilities'">
        <el-table
          key="facilities"
          ref="feFacilityListRef"
          :data="feFacilityList"
          class="device-style"
          v-loading="loading"
          max-height="250"
          :row-key="getRowKey"
          highlight-current-row
          @current-change="handleDevice"
        >
          <el-table-column
            label="第一年配套设施使用费"
            align="center"
            prop="firstYearFacilityFee"
          />
          <el-table-column
            label="第二年配套设施使用费"
            align="center"
            prop="secondYearFacilityFee"
          />
          <el-table-column
            label="第三年配套设施使用费"
            align="center"
            prop="thirdYearFacilityFee"
          />
          <el-table-column
            label="第四年配套设施使用费"
            align="center"
            prop="fourthYearFacilityFee"
          />
          <el-table-column
            label="第五年配套设施使用费"
            align="center"
            prop="fifthYearFacilityFee"
          />
        </el-table>
        <pagination v-show="feFacilityTotal > 0" :total="feFacilityTotal" />
      </div>
     
      <div v-if="typeFee === 'property'">
        <el-table
          key="property"
          ref="fePropertyListRef"
          :data="fePropertyList"
          class="device-style"
          v-loading="loading"
          max-height="250"
          :row-key="getRowKey"
          highlight-current-row
          @current-change="handleDevice"
        >
          <el-table-column label="收费模式" align="center" prop="feeModel" >
                       <template slot-scope="scope">
          <span>{{ scope.row.feeModel=='0'?'按月':scope.row.feeModel=='1'?'按季度':''}}</span>
        </template>
            </el-table-column>
          <el-table-column
            label="计价标准(元/平方/月)"
            align="center"
            prop="feeStandard"
          />
        </el-table>

        <pagination v-show="fePropertyTotal > 0" :total="fePropertyTotal" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDevice(typeFee)">取 消</el-button>
        <el-button type="primary" @click="submitDevice(typeFee)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getQyEnterprise,
  addQyEnterprise,
  updateQyEnterprise,
} from "@/api/smartParks/merchants/merchantsCompanySettlein";
import { returntomenu } from "@/utils/common";
import { listZsCustomer } from "@/api/smartParks/merchants/merchantsCustomer";
import { listBuiRoom } from "@/api/parkAssets/buildingRoom"; //房源
import { listFeOffice } from "@/api/smartParks/operatingFee/office";
import { listFeFacility } from "@/api/smartParks/operatingFee/facilities";
import { listFeElevator } from "@/api/smartParks/operatingFee/elevator";
import { listFeProperty } from "@/api/smartParks/operatingFee/property";
import { listFeFixed } from "@/api/smartParks/operatingFee/fixed";
import { listFeParking } from "@/api/smartParks/operatingFee/park";
import FileUpload from "@/views/smartParks/parkAssets/components/FileUpload.vue";
import {
  addFeLeaseRecord,
} from "@/api/smartParks/operatingFee/leasing";
export default {
  name: "QycomAdd",
  components: {
    FileUpload,
  },
  data() {
    return {
      activeNames: ["1", "2", "3",'4','5'],
      step: [
        {
          to: "shenqing",
          text: "申请信息",
        },
        {
          to: "zulin",
          text: "租赁信息",
        },
        {
          to: "dianjian",
          text: "房源列表",
        },
        {
          to: "dianjian1",
          text: "费用选择",
        },
        {
          to: "fujian",
          text: "上传附件",
        },
      ],
      stepSelect: 0,
      // 表单参数
      form: {
        id: null,
         recordType:0,
        enterpriseName: null,
        legalPerson: null,
        legalPhone: null,
        enterpriseContact: null,
        contactPhone: null,
        enterpriseType: null,
        registrationDate: null,
        mainProduct: null,
        enterpriseScale: null,
        taxRegistrationDate: null,
        approvalDate: null,
        acceptanceDate: null,
        createBy: null,
        productionStatus: null,
        createTime: null,
        address: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        delFlag: null,
        tenantId: null,
        fileIdList: [],
        leaseRecord: {
          roomIdList: [], //
           beginTime: "",
          endTime: "",
          rentFreeBeginDate: "",
          rentFreeEndDate: "",
          facilityFeeId: "", //设施
          officeFeeId: "", //办公费用
          propertyFeeId: "", //物业
        },
      },
      zsCustomerList: [], //或缺企业
      // 表单校验
      rules: {
        customerId: [
          { required: true, message: "企业名称不能为空", trigger: "change" },
        ],
      },

      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      dialogdeviceVisible: false, //房源
      loading: false,
      buiRoomList: [], //房源列表
      buiRoomListTotal: "",
      buiRoomListSelectTem: [], //选择的
      buiRoomListSelect: [], //确定的
      title: "", //谈框标题
      typeFee: "", //那种费用

      feOfficeList: [], //办公
      OfficeTotal: 0,
      OfficeTotalTem: {},
      OfficeTotalSel: [],

      feFacilityList: [], //设施
      feFacilityTotal: 0,
      feFacilityTem: {},
      feFacilitySel: [],

      fePropertyList: [], //property
      fePropertyTotal: 0,
      fePropertyListTem: {},
      fePropertyListSel: [],

   
    };
  },
 
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch("tagsView/delView", this.$route);
    next();
  },
  created() {
      this.form.enterpriseName = this.$route.query.name;
    this.form.id = this.$route.query.id;
    this.getmaintainList(); //列表
    this.getList(); //房源
  },
  methods: {
    jump(domId, index) {
      this.stepSelect = index;
      //页面滚动了的距离
      let height =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let dom = document.getElementById(domId);
      // let domHeight = dom.offsetTop + 60;
      let domHeight = dom.offsetTop - 104;
      //滚动距离计算
      var S = Number(height) - Number(domHeight);
      //判断上滚还是下滚
      if (S < 0) {
        //下滚
        S = Math.abs(S);
        window.scrollBy({
          top: S,
          behavior: "smooth",
        });
      } else if (S == 0) {
        //不滚
        window.scrollBy({
          top: 0,
          behavior: "smooth",
        });
      } else {
        //上滚
        S = -S;
        window.scrollBy({
          top: S,
          behavior: "smooth",
        });
      }
    },
    changeEnter() {
      if (this.form.customerId) {
        let itemTep = this.zsCustomerList.filter((item) => {
          return item.id == this.form.customerId;
        });
        this.form.enterpriseName = itemTep[0].enterpriseName
          ? itemTep[0].enterpriseName
          : undefined;
        this.form.enterpriseContact = itemTep[0].enterpriseContact
          ? itemTep[0].enterpriseContact
          : undefined;
        this.form.contactPhone = itemTep[0].contactPhone
          ? itemTep[0].contactPhone
          : undefined;
        this.form.enterpriseType = itemTep[0].enterpriseType
          ? itemTep[0].enterpriseType
          : undefined;
      } else {
        this.form.enterpriseName = undefined;
        this.form.enterpriseContact = undefined;
        this.form.contactPhone = undefined;
        this.form.enterpriseType = undefined;
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        recordType:0,
        enterpriseName: null,
        legalPerson: null,
        legalPhone: null,
        enterpriseContact: null,
        contactPhone: null,
        enterpriseType: null,
        registrationDate: null,
        mainProduct: null,
        enterpriseScale: null,
        taxRegistrationDate: null,
        approvalDate: null,
        acceptanceDate: null,
        createBy: null,
        productionStatus: null,
        createTime: null,
        address: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        delFlag: null,
        tenantId: null,
        fileIdList: [],
        leaseRecord: {
          roomIdList: [], //
           beginTime: "",
          endTime: "",
          rentFreeBeginDate: "",
          rentFreeEndDate: "",
          facilityFeeId: "", //设施
       
          officeFeeId: "", //办公费用
          propertyFeeId: "", //物业
        },
      };

      this.feFacilitySel = [];
      this.OfficeTotalSel = [];

      this.buiRoomListSelect = [];
      this.fePropertyListSel = [];
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
       this.$store.dispatch("tagsView/delView", this.$route);
                  this.$router.go(-1);
    },

    //获取列表
    getmaintainList() {
      //选择企业
      listZsCustomer().then((response) => {
        this.zsCustomerList = response.rows;
      });
     
    },
    getList() {
      let data = {
        leaseState: 0,
        roomTypeList: ["0","2"],
        stateList: ["0","3"],
      };
      listBuiRoom(data).then((response) => {
        this.buiRoomList = response.rows;
        this.buiRoomListTotal = response.total;
        this.loading = false;
      });
      listFeOffice().then((response) => {
        this.feOfficeList = response.rows;
        this.OfficeTotal = response.total;
        this.loading = false;
      });
      listFeFacility().then((response) => {
        this.feFacilityList = response.rows;
        this.feFacilityTotal = response.total;
        this.loading = false;
      });
      listFeElevator().then((response) => {
        this.feElevatorList = response.rows;
        this.feElevatorTotal = response.total;
        this.loading = false;
      });
      listFeProperty().then((response) => {
        this.fePropertyList = response.rows;
        this.fePropertyTotal = response.total;
        this.loading = false;
      });
      listFeFixed().then((response) => {
        this.feFixedList = response.rows;
        this.feFixedTotal = response.total;
        this.loading = false;
      });
     
    },
    addDevice(param) {
      this.dialogdeviceVisible = true;
      this.typeFee = param;
      if (this.typeFee === "buiRoomList") {
        this.title = "选择房源";
        if (this.buiRoomListSelect.length > 0) {
          this.$refs.buiRoomListRef.clearSelection();
          this.$nextTick(() => {
            this.buiRoomListSelect.forEach((row) => {
              this.$refs.buiRoomListRef.toggleRowSelection(
                this.buiRoomList.find((item) => {
                  return row.id === item.id;
                }),
                true
              );
            });
          });
        } else {
          this.$nextTick(() => {
            this.$refs.buiRoomListRef.clearSelection();
          });
        }
      }
      if (this.typeFee === "office") {
        this.title = "选择办公费用";
        if (this.OfficeTotalSel.length > 0) {
          this.$nextTick(() => {
            this.OfficeTotalSel.forEach((row) => {
              this.$refs.feOfficeListRef.toggleRowSelection(
                this.feOfficeList.find((item) => {
                  return row.id === item.id;
                }),
                true
              );
            });
          });
        } else {
          this.$nextTick(() => {
            this.$refs.feOfficeListRef.setCurrentRow();
          });
        }
      }

      if (this.typeFee === "facilities") {
        this.title = "选择设施费用";
        if (this.feFacilitySel.length > 0) {
          this.$nextTick(() => {
            this.feFacilitySel.forEach((row) => {
              this.$refs.feFacilityListRef.toggleRowSelection(
                this.feFacilityList.find((item) => {
                  return row.id === item.id;
                }),
                true
              );
            });
          });
        } else {
          this.$nextTick(() => {
            this.$refs.feFacilityListRef.setCurrentRow();
          });
        }
      }
  
      if (this.typeFee === "property") {
        this.title = "选择物业费用";
        if (this.fePropertyListSel.length > 0) {
          this.$nextTick(() => {
            this.fePropertyListSel.forEach((row) => {
              this.$refs.fePropertyListRef.toggleRowSelection(
                this.fePropertyList.find((item) => {
                  return row.id === item.id;
                }),
                true
              );
            });
          });
        } else {
          this.$nextTick(() => {
            this.$refs.fePropertyListRef.setCurrentRow();
          });
        }
      }
  
     
    },
    //确定
    submitDevice() {
      this.dialogdeviceVisible = false;
      if (this.typeFee === "buiRoomList") {
        this.buiRoomListSelect = JSON.parse(
          JSON.stringify(this.buiRoomListSelectTem)
        );
      }
      if (this.typeFee === "office") {
        let temArr = [this.OfficeTotalTem];
        this.OfficeTotalSel = JSON.parse(JSON.stringify(temArr));
      }
      if (this.typeFee === "facilities") {
        let temArr = [this.feFacilityTem];
        this.feFacilitySel = JSON.parse(JSON.stringify(temArr));
      }
     
      if (this.typeFee === "property") {
        let temArr = [this.fePropertyListTem];
        this.fePropertyListSel = JSON.parse(JSON.stringify(temArr));
      }
     
      
    },
    getRowKey(row) {
      return row.id;
    },
    // //选择房源
    handleDevice(val) {
      if (this.typeFee === "buiRoomList") {
        this.buiRoomListSelectTem = val;
      }
      if (this.typeFee === "office") {
        this.OfficeTotalTem = val;
      }
      if (this.typeFee === "facilities") {
        this.feFacilityTem = val;
      }
     
      if (this.typeFee === "property") {
        this.fePropertyListTem = val;
      }
     
     
    },

    delDevice(param, index) {
      if (param === "buiRoomList") {
        this.buiRoomListSelect.splice(index, 1);
      }
      if (param === "office") {
        this.OfficeTotalSel = [];
      }
      if (param === "facilities") {
        this.feFacilitySel = [];
      }
     
      if (param === "property") {
        this.fePropertyListSel = [];
      }
    
      
    },

    cancelDevice() {
      this.dialogdeviceVisible = false;
    },
    //选择办公费用
    handleOffice() {},
    /** 提交按钮 */
    submitForm: function () {

      this.form.leaseRecord.facilityFeeId =
        this.feFacilitySel.length === 1 ? this.feFacilitySel[0].id : "";

      this.form.leaseRecord.officeFeeId =
        this.OfficeTotalSel.length === 1 ? this.OfficeTotalSel[0].id : "";
      this.form.leaseRecord.propertyFeeId =
        this.fePropertyListSel.length === 1 ? this.fePropertyListSel[0].id : "";

     
      this.form.leaseRecord.roomIdList = this.buiRoomListSelect.map((item) => {
        return item.id;
      });
      this.$refs["form"].validate((valid) => {
        if (valid) {
             let data = JSON.parse(JSON.stringify(this.form));
          data.fileIdList = this.$refs.fileupload.fileList.map(
            (item) => item.id
          );
          
          if (this.form.id != undefined) {
            addFeLeaseRecord(data).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.reset();
                setTimeout(()=>{
 this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1);
                },2000)
                
              }
            });
          } else {
            addQyEnterprise(data).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.reset();
              }
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-select,
.el-date-editor {
  width: 100%;
}
.big-foot-fixed {
  text-align: center;
  padding-bottom: 20px;
}
.cgjhadd {
  overflow: hidden;
  background: #f7f8f8;
  min-height: calc(100vh - 84px);
  height: auto;
  .top {
    height: 40px;
    box-sizing: border-box;
    background: #409eff !important;
    color: #fff;
    padding-left: 20px;
    display: flex;
    align-items: center;
    font-size: 12px;
    justify-content: space-between;
    .submit {
      padding: 3px 10px;
      border-radius: 10px;
      background: #fff;
      color: #409eff;
      cursor: pointer;
      margin-right: 100px;
    }
  }
}

.contain {
  height: auto !important;
  margin: 20px 20px 0px 20px;
  padding-bottom: 20px;
  display: flex;
  .left {
    .text-height {
      height: 80px;
      ::v-deep .el-form-item__content {
        height: 80px;
      }
    }
    .lrAbout {
      display: flex;
      justify-content: space-between;
    }
    width: 90%;
    ::v-deep .el-collapse {
      border-bottom: 0px;
    }
    ::v-deep .el-collapse-item {
      background: #fff;
      font-size: 12px;
      margin-bottom: 20px;

      .el-collapse-item__header,
      .el-collapse-item__wrap {
        background: "";
      }

      .el-collapse-item__header {
        position: relative;
        height: 44px;
        padding-left: 20px;
      }

      .el-collapse-item__header:before {
        position: absolute;
        content: "";
        width: 2px;
        height: 18px;
        background-color: #409eff;
        left: 0;
        top: 13px;
      }

      .el-collapse-item__wrap {
        border-top: 1px solid #e6ebf5;
      }

      .el-collapse-item__content {
        padding-top: 25px;
      }
      .form-box1 {
        width: 100%;
        padding: 0 20px;
        .el-button {
          margin-top: 10px;
        }
        .el-button:first-child {
          margin-top: -10px;
        }
        .el-table {
          margin-top: 10px;
        }
      }
      .form-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0 20px;

        .el-form-item {
          width: 48%;
        }

        .el-form-item__label {
          font-size: 12px;
          font-weight: normal;
        }

        .el-form-item:nth-child(2n) {
          margin-left: 4%;
        }
      }
    }

    ::v-deep .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    ::v-deep .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    ::v-deep .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    ::v-deep .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }

  .right {
    width: 10%;

    .my-steps-box {
      font-size: 12px;
      position: fixed;
      right: 30px;
      // top: 104px;
      .step-item {
        margin-bottom: 30px;
        position: relative;
        .top-title {
          display: flex;
          cursor: pointer;
          .cricle {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 5px;
            background: #e8eaec;
            box-sizing: border-box;
            // background: red;
            border: 2px solid #f7f8f8;
          }
        }
        .line {
          position: absolute;
          width: 2px;
          height: 30px;
          top: 12px;
          left: 5px;
          background: #e8eaec;
        }
      }
      .step-item.step-active {
        .cricle {
          border: 2px solid #d5e7f9;
          background-color: #2d8cf0;
        }
        .text {
          color: #2d8cf0;
        }
      }
      .step-item:nth-last-child(1) .line {
        display: none;
      }
    }
  }
}
</style>
